.top-nav {
    top: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    width: 100%;
    height: 50px;
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 在 logo 和菜单之间留出空间 */
    align-items: center;
    position: fixed;
    z-index: 1000;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../assets/top.png");

    .logo-container {
        display: flex;
        align-items: center; /* 垂直居中 */
        /* 根据导航栏的高度设置padding，或者使用固定的height属性 */
      }
      
      .logo-container a {
        text-decoration: none; /* 移除链接的下划线 */
        display: flex;
        align-items: center; /* 确保图片和文本垂直居中 */
      }
      
      .logo {
        height: 50px; /* 根据需要调整logo的大小 */
        width: auto; /* 保持图片的宽高比 */
        margin-right: 10px; /* 图片和文本之间的间距 */
      }
      
      .text {
        color: #fff; /* 文本颜色设为白色 */
        font-family: 'Microsoft YaHei', sans-serif; /* 使用微软雅黑字体 */
        font-size: 20px; /* 文本大小，根据需要调整 */
        margin-left: 0px; /* 保持文本和图片的距离，根据需要调整 */
        /* 如果需要加粗文本 */
        font-weight: bold;
      }

  .top-menu {
    flex: 1;
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 两端对齐，元素之间的间隔都相等 */
    align-items: center; /* 垂直居中 */
    height: 100%; /* 使.top-menu的高度与.top-nav相同 */
    max-width: 1200px; /* 设置导航栏的最大宽度 */
    margin: 0 auto; /* 水平居中导航栏 */

    .right-menu {
      height: 100%;
      line-height: 50px; /* 与.top-nav的高度保持一致 */
      padding-right: 15px; /* 添加适当的右边距 */

      .avatar-container {
        margin-right: 10px; /* 调整右边距 */
      }
    }

    .nav-item {
      /* 可能需要添加额外的样式来确保导航项的布局 */
    }
  }

  .hamburger-container,
  .breadcrumb-container {
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* 其他样式保持不变 */
}

.top-nav {
    .log {
        padding: 0 20px;
        line-height: 56px;
        font-size: 24px;
        font-weight: bold;
        color: rgb(191, 203, 217);
        float: left;
        margin-right: 50px;
    }

    .el-menu {
        float: left;
        border: none !important;
        background-color: transparent;

        .nav-item {
            display: inline-block;

            .el-menu-item {
                color: rgb(191, 203, 217);

                &:hover {
                    background-color: transparent !important;
                }

                &:focus {
                    background-color: transparent !important;
                    // color: $subMenuActiveText !important;
                }
            }
        }
    }

    .right-menu {
        float: right;
        height: 100%;

        &:focus {
            outline: none;
        }

        .right-menu-item {
            display: inline-block;
            padding: 0 8px;
            height: 100%;
            font-size: 18px;
            color: #5a5e66;
            vertical-align: text-bottom;

            &.hover-effect {
                cursor: pointer;
                transition: background .3s;

                &:hover {
                    background: transparent
                }
            }
        }

        .avatar-container {
            margin-right: 30px;

            .avatar-wrapper {
                margin-top: 5px;
                position: relative;

                .user-avatar {
                    cursor: pointer;
                    width: 40px;
                    height: 40px;
                    border-radius: 50px;
                }

                .el-icon-caret-bottom {
                    cursor: pointer;
                    position: absolute;
                    right: -20px;
                    top: 25px;
                    font-size: 12px;
                }
            }
        }
    }
}
